<template>
  <div>
    <card v-if="showTitle" class="insure-card" title="操作记录" :showDivider="false" />
    <table-index class="insure-card-table" :table="table" @loadData="loadData">
      <template #log="{ record }">
        <p v-for="item in record.contentList" :key="item">{{ item || '-' }}</p>
      </template>
    </table-index>
  </div>
</template>

<script setup>
  import { reactive, onMounted } from 'vue'
  import { useFetchTableDataApi, useTable } from '@/hooks/table'
  import { getOperateLog } from '@/api/common'

  const props = defineProps({
    id: {
      type: [String, Number],
    },
    type: {
      type: [String, Number],
    },
    showTitle: Boolean,
    list: {
      type: Array,
      default: () => [
        { title: '操作人', dataIndex: 'userName', width: 130 },
        {
          title: '操作时间',
          dataIndex: 'operateTime',
          width: 170,
        },
        { title: '操作节点', dataIndex: 'node', width: 130 },
        { title: '变更内容', slotName: 'log' },
      ],
    },
  })

  const queryParam = reactive({})
  const table = useTable({
    columns: props.list,
  })

  const loadData = useFetchTableDataApi(table, queryParam, getOperateLog)

  onMounted(() => {
    queryParam.bizId = props.id
    queryParam.bizType = props.type
    loadData()
  })
</script>
